<template>
	<view class="box" :style="{ height: wh }">
		<div class="card" :style='{ height }' style="background-color: #f8bc0f;" @click="goLogin('driver')">
			<img src="../static/images/login/car.png" style="height: 60%;width: 60%;" alt="" />
			<div style="position: absolute;font-size: 16px;bottom: 10px;right: 10px;">司机</div>
		</div>
		<div class="card" :style='{ height }' style="background-color: #0c89da;" @click="goLogin('captain')">
			<img src="../static/images/login/ship.png" style="height: 60%;width: 60%;" alt="" />
			<div style="position: absolute;font-size: 16px;bottom: 10px;right: 10px;">船长</div>
		</div>
	</view>
</template>

<script setup>
import {
	useUserStore
} from "@/store"

/* 数据 */
const {
	SETLOGINROLE
} = useUserStore()
const wh = uni.getWindowInfo().windowHeight + 'px'
const height = Math.round(uni.getWindowInfo().windowHeight * 0.3) + 'px'


/* 函数 */
const goLogin = (role) => {
	SETLOGINROLE(role)
	uni.reLaunch({
		url: '/pages/codeLogin?roleCode=' + role
	})
}
</script>

<style lang="scss" scoped>
.box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	padding: 10% 20px;

	.card {
		border-radius: 10px;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		position: relative;
	}
}
</style>